<template>
	<view class="container">
		<uv-form labelPosition="left" :model="userInfo" :rules="rules" ref="upRef">
			<uv-form-item label="姓名:" prop="stuName" borderBottom>
				<uv-input v-model="userInfo.stuName" border="none">
				</uv-input>
			</uv-form-item>
			<uv-form-item label="性别:" prop="sex" borderBottom>
				<uv-radio-group v-model="userInfo.sex" placement="row">
					<uv-radio :customStyle="{marginLeft: '16px',marginRight: '25px'}" name="0" label="男"></uv-radio>
					<uv-radio :customStyle="{marginRight: '16px'}" name="1" label="女"></uv-radio>
				</uv-radio-group>
			</uv-form-item>
			<uv-form-item label="学号:" prop="stuNum" borderBottom>
				<uv-input v-model="userInfo.stuName" border="none">
				</uv-input>
			</uv-form-item>
			<uv-form-item label="电话:" prop="phone" borderBottom>
				<uv-input v-model="userInfo.phone" border="none">
				</uv-input>
			</uv-form-item>
			<uv-form-item label="昵称:" prop="nickName" borderBottom>
				<uv-input v-model="userInfo.nickName" border="none">
				</uv-input>
			</uv-form-item>
			<uv-form-item label="头像:" prop="image" borderBottom>
				<uv-upload :fileList="fileList" name="1" multiple :maxCount="1" @afterRead="afterRead"
					@delete="deletePic"></uv-upload>
			</uv-form-item>
			<uv-button type="primary" text="提交修改" customStyle="margin-top: 50px;background:#6ECEB0;border:none;"
				@click="submit"></uv-button>

		</uv-form>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from 'vue';
	import {onReady,onLoad} from '@dcloudio/uni-app'
	import http from '../../common/http.js'
	import {updateStuByIdApi} from '../../api/index.js'
	const upRef = ref()

	const userInfo = reactive({
		stuId: '',
		stuName: '',
		sex: '',
		phone: '',
		stuNum: '',
		nickName: '',
		image: ''
	})
	//表单验证规则
	const rules = reactive({
		'stuName': {
			type: 'string',
			required: true,
			message: '请填写姓名',
			trigger: ['blur', 'change']
		},
		'sex': {
			type: 'string',
			required: true,
			message: '请选择性别',
			trigger: ['blur', 'change']
		},
		'phone': {
			type: 'string',
			required: true,
			message: '请填写电话',
			trigger: ['blur', 'change']
		},
		'stuNum': {
			type: 'string',
			required: true,
			message: '请填写学号',
			trigger: ['blur', 'change']
		},
		'nickName': {
			type: 'string',
			required: true,
			message: '请填写昵称',
			trigger: ['blur', 'change']
		},
		'image': {
			type: 'string',
			required: true,
			message: '请上传头像',
			trigger: ['blur', 'change']
		},
	})
	//表单提交
	const submit = ()=>{
		console.log(userInfo)
		upRef.value.validate().then(async(res)=>{
			console.log(res)
			let result = await updateStuByIdApi(userInfo)
			if (result && result.code == 200) {
				uni.navigateBack({
					delta: 1
				})
			}
		})
	}
	//图片上传
	const fileList = ref([])
	//删除图片
	const deletePic = (event) => {
		fileList.value = fileList.value.filter((item, index) => {
			return index != event.index
		})
	}
	const afterRead = async (event) => {
		console.log(event)
		// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
		let lists = [].concat(event.file)
		let fileListLen = fileList.value.length
		lists.map((item) => {
			fileList.value.push({
				...item,
				status: 'uploading',
				message: '上传中'
			})
		})
		// 此写法可以避免使用老写法在VUE3中不更新
		// #ifdef VUE3
		fileList.value = fileList.value.filter((item, index) => {
			return index >= 0
		})
		// #endif
		for (let i = 0; i < lists.length; i++) {
			const result = await uploadFilePromise(lists[i].url)
			console.log(result)
			userInfo.image = http.baseUrl + result;
			let item = fileList.value[fileListLen]
			fileList.value.splice(fileListLen, 1, Object.assign(item, {
				status: 'success',
				message: '',
				url: result
			}))
			fileListLen++
		}
	}
	const uploadFilePromise = (url) => {
		return new Promise((resolve, reject) => {
			let a = uni.uploadFile({
				url: http.baseUrl + '/api/upload/uploadImage', // 仅为示例，非真实的接口地址
				filePath: url,
				name: 'file',
				formData: {
					user: 'test'
				},
				success: (res) => {
					let result = JSON.parse(res.data)
					setTimeout(() => {
						resolve(result.data)
					}, 1000)
				}
			});
		})
	}
	onReady(()=>{
		upRef.value.setRules(rules)
	})
	onLoad((options)=>{
		const users = JSON.parse(options.user)
		Object.assign(userInfo,users)
		//图片回显
		if (users.image) {
			//转换为数组
			let imgs = users.image.split(",")
			for (let j = 0; j < imgs.length; j++) {
				let obj = {
					url: ''
				}
				obj.url = imgs[j]
				fileList.value.push(obj)
			}
		}
	})
</script>

<style lang="scss">
	page {
		background-color: #FFF;
	}

	.container {
		padding: 0rpx 30rpx;
	}
</style>
